<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
	<meta charset="utf-8"> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=500" />
	<meta name="keywords" content="ScrollMagic, example, scrolling, attaching, scrollbar, tween, tweenmax" />
	<meta name="author"	content="Jan Paepke (www.janpaepke.de)" />
	<title>考勤系统使用教程</title>

	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic|Josefin+Slab:400,700italic' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="/css/normalize.css" type="text/css">
	<link rel="stylesheet" href="/css/style.css" type="text/css">
	<link rel="stylesheet" href="/css/help.css" type="text/css">
	<link rel="stylesheet" href="/css/normal.css" type="text/css">
	<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
	<style type="text/css">
		form.move p {
			padding: 4px;
			float: left;
		}
	</style>

	<script type="text/javascript" src="/js/lib/jquery.min.js"></script>
	<script type="text/javascript" src="/js/lib/highlight.pack.js"></script>
	<script type="text/javascript" src="/js/lib/modernizr.custom.min.js"></script>
	<script type="text/javascript" src="/js/examples.js"></script>
	
	<script type="text/javascript" src="/scrollmagic/uncompressed/ScrollMagic.js"></script>
	<script type="text/javascript" src="/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script>
</head>
<body>
<!-- 	<ul id="menu"></ul> -->
	<a href="#" class="go_back" style="box-sizing:border-box;padding:8px 20px 5px 8px; position:fixed;margin:20px; cursor:pointer"><img src="/img/go_back.png"/></a>
	<div id="content-wrapper">
		<div id="example-wrapper">
			<div class="scrollContent">
				<section id="titlechart">
					<div id="description">
						<h1>OCampus</h1>
						<h2>考勤系统使用教程</h2>
						<p>
							请童鞋们认真阅读以下教程
						</p>

					</div>
				</section>
				<section class="demo">
					<style type="text/css">
						.active {
							background-color: #307FB5;
						}
					</style>
					<form class="move">
						<fieldset>
							<p id="high1">1</p>
							<p id="high2">2</p>
							<p id="high3">3</p>
							<p id="high4">4</p>
						</fieldset>
					</form>
					<div class="spacer s1" id="sec1">
						<div class="box2" style="background-color: #8DBBE0;">
							<p>1</p>
							<a href="#" class="task_1">选课</a>
						</div>
					</div>
					<div class="spacer">
						<ul>
							<li>方法 1：扫描教师在课堂所给二维码，登陆后自动选上该门课</li>
					
						</ul>
					</div>
					<div class="spacer">
					<ul>
						<li class="way_2">方法 2：</li></ul>
						<ol>
									<li>若无法扫码选课，请向教师索要该课的课程号</li>
									<li>登陆后，点击页面中的"添加课程"并输入课程号即可选课</li>
								</ol>
					
								
					</div>
					<div class="spacer s1" id="sec2">
						<div class="box2" style="background-color: #6AA6D8;">
							<p>2</p>
							<a href="#" class="task_2">签到</a>
						</div>
							<div class="spacer">
						<ul>
							<li>点击导航上的快速签到<a href="#" class="quikCheck" style="  width: 70px;margin:0 auto">快速签到</a></li>
							<li>输入教师所给的激活码即可签到</li>
					
						</ul>
					</div>
					</div>
					<div class="spacer s1" id="sec3">
						<div class="box2" style="background-color: #4E96D1;">
							<p>3</p>
							<a href="#" class="task_3">确认</a>
						</div>
					</div>
						<div class="spacer">
						<ul>
							<li>点击进入所签到课程,若出勤计次标识转变为<span class="green" style="color:white">绿色</span>代表签到成功，<span class="red" style="color:white;">红色</span>则说明未签到</li>
					
						</ul>
					</div>
					<div class="spacer s1" id="sec4">
						<div class="box2" style="background-color: #307FB5;">
							<p>4</p>
							<a href="#" class="service_kid">联系客服</a>
						</div>
					</div>
					<div class="spacer">
						<ul>
							<li>若童鞋们依然有是有疑惑请发邮件至：<a  href="mailto:servicekid@hotmail.com?subject=签到系统使用问题">servicekid@hotmail.com</a></li>
					
						</ul>
					</div>
					<div class="spacer s2"></div>
				
					<script>
						// init controller
						var controller = new ScrollMagic.Controller({globalSceneOptions: {duration: 100}});

						// build scenes
						new ScrollMagic.Scene({triggerElement: "#sec1"})
										.setClassToggle("#high1", "active") // add class toggle
										.addIndicators() // add indicators (requires plugin)
										.addTo(controller);
						new ScrollMagic.Scene({triggerElement: "#sec2"})
										.setClassToggle("#high2", "active") // add class toggle
										.addIndicators() // add indicators (requires plugin)
										.addTo(controller);
						new ScrollMagic.Scene({triggerElement: "#sec3"})
										.setClassToggle("#high3", "active") // add class toggle
										.addIndicators() // add indicators (requires plugin)
										.addTo(controller);
						new ScrollMagic.Scene({triggerElement: "#sec4"})
										.setClassToggle("#high4", "active") // add class toggle
										.addIndicators() // add indicators (requires plugin)
										.addTo(controller);
					</script>
				</section>

			</div>
		</div>
	</div>
	<script type="text/javascript" src="/js/tracking.js"></script>
</body>
</html>
